package com.fanketly.funacg2.ui.screen

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ElevatedCard
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.fanketly.funacg2.App
import com.fanketly.funacg2.data.model.WorkList
import com.fanketly.funacg2.ui.components.MyAsyncImage
import com.fanketly.funacg2.ui.screen.destinations.LoginScreenDestination
import com.fanketly.funacg2.ui.theme.Brown
import com.fanketly.funacg2.ui.theme.WhiteText200
import com.fanketly.funacg2.ui.viewmodels.HomeViewModel
import com.fanketly.funacg2.utils.ToastUtils
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.navigation.DestinationsNavigator

@Destination
@Composable
fun RecommendScreen(homeViewModel: HomeViewModel, navigator: DestinationsNavigator) {
    LaunchedEffect(key1 = Unit, block = {
        if (!App.isLogin()) {
            navigator.popBackStack()
            // 跳转到登录页面
            navigator.navigate(LoginScreenDestination)
            ToastUtils.shortToast("请先进行登录")
        } else {
            homeViewModel.getRecommend()
        }
    })
    LazyColumn(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        items(homeViewModel.recommendList) {
            SimpleListCard(it) {
                homeViewModel.getAudio(it)
            }
        }
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SimpleListCard(work: WorkList.Work, onClick: () -> Unit) {
    ElevatedCard(
        modifier = Modifier
            .fillMaxWidth(0.9f)
            .padding(top = 8.dp, bottom = 8.dp), onClick = onClick
    ) {
        Column {
            Box {
                MyAsyncImage(
                    model = work.img240,
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp),
                )
                Text(
                    text = "RJ${work.id}",
                    modifier = Modifier
                        .padding(8.dp)
                        .background(Brown, MaterialTheme.shapes.extraSmall)
                        .padding(4.dp),
                    style = MaterialTheme.typography.bodySmall,
                    color = WhiteText200,
                )
                Text(
                    text = work.createDate,//收藏日期
                    modifier = Modifier
                        .align(Alignment.BottomEnd)
                        .background(
                            color = MaterialTheme.colorScheme.background.copy(alpha = 0.7f),
                            shape = RoundedCornerShape(topStart = 8.dp),
                        )
                        .padding(4.dp),
//                    fontWeight = FontWeight.Bold,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onBackground,
                )
            }
            Column(
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
            ) {
                Text(
                    text = work.title,
                    color = MaterialTheme.colorScheme.onSurface,
                    style = MaterialTheme.typography.titleSmall,
                )
            }
        }
    }
}